﻿<extend name="Public:base" />
<block name="title"><title>履历信息</title></block>
<block name="header_styles">
    <!--<link href="__Public__/js/kendo.ui/kendo.bootstrap.min.css" rel=" stylesheet" />
    <link href="__Public__/js/kendo.ui/kendo.common-bootstrap.min.css" rel=" stylesheet" />-->
</block>
<block name="main">
    <div class="row">
        <div class="col-xs-3">
            <div class="column-sidebar">
                <include file="Public:LeftMenu" />
            </div>
        </div>
        <div class="col-xs-9">
            <div class="column-main">
                <div class="section">
                    <div class="section-title">
                        履历信息 <span class="help-info">赶快创建履历，让自己在人才库闪闪发亮吧！</span>
                    </div>
                    <div class="section-content">
                        <div>
                            <div class="panel-body form-inline">
                                <div class="form-group">
                                    <label class="control-label">隐私设置</label>&nbsp;
                                    <div class="form-group" id="phSettingView">
                                        <p class="label-privacy">{$f_jianli|toPriFlag}</p>
                                        &nbsp;&nbsp;
                                        <a href="javascript:;" class="link-orange" id="btnChangeSettings"><i class="fa fa-edit"></i></a>
                                    </div>
                                    <div class="form-group" id="phSettingEdit" style="display:none;">
                                        <select id="ddlSettings" name="f_jianli" class="custom-select">
                                            <option value="1" <if condition="$f_jianli eq 1">selected="selected"</if>>仅自己可见</option>
                                            <option value="2" <if condition="$f_jianli eq 2">selected="selected"</if>>队友及雇主可见</option>
                                            <option value="3" <if condition="$f_jianli eq 3">selected="selected"</if>>所有人可见</option>
                                        </select>
                                        <a href="javascript:;" class="btn btn-green" id="btnSaveSettings"><i class="fa fa-save"></i> 保存</a>
                                        <a href="javascript:;" class="btn btn-default" id="btnCancelSettings"><i class="fa fa-times"></i> 取消</a>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="form-buttons">
                            <a href="javascript:void(0);" class="btn btn-default" id="btnAddNew"><i class="fa fa-plus"></i> 新增履历</a>
                        </div>
                        <br />
                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                            <volist name="arr" id="vo">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="heading{$vo.id}">
                                        <h4 class="panel-title">
                                            <span class="pull-right">
                                                <a href="javascript:void(0)" class="edit-item" data-id="{$vo.id}" title="编辑"><i class="fa fa-pencil"></i></a>&nbsp;
                                                <a href="javascript:void(0)" class="remove-item" data-id="{$vo.id}" title="删除"><i class="fa fa-times"></i></a>
                                            </span>
                                            <a role="button" class="controls collapsed" data-toggle="collapse" data-parent="\\#accordion" href="\\#collapse{$vo.id}" aria-expanded="false" aria-controls="collapse{$vo.id}">
                                                <span class="pull-right" style="font-size:13px;line-height: 20px;">{$vo.btime} 至 {$vo.etime}&nbsp;&nbsp;</span>  {$vo.company} | {$vo.department} | {$vo.position}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapse{$vo.id}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{$vo.id}">
                                        <div class="panel-body form-horizontal label-align-left">
                                            <div id="phPreview{$vo.id}">
                                                <div class="form-group">
                                                    <label class="control-label col-xs-2">公司</label>
                                                    <div class="col-xs-9">
                                                        <p class="form-control-static">{$vo.company}</p>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-xs-2">部门</label>
                                                    <div class="col-xs-9">
                                                        <p class="form-control-static">{$vo.department}</p>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-xs-2">职位</label>
                                                    <div class="col-xs-9">
                                                        <p class="form-control-static">{$vo.position}</p>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-xs-2">时间</label>
                                                    <div class="col-xs-9">
                                                        <p class="form-control-static">{$vo.btime} - {$vo.etime}</p>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-xs-2">工作内容</label>
                                                    <div class="col-xs-9">
                                                        <p class="form-control-static">{$vo.content}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="phEditable{$vo.id}" style="display:none;">
                                                <form action="" method="post" id="formAddNewRecord{$vo.id}" data-id="{$vo.id}">
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <div class="form-group">
                                                                <label class="control-label col-xs-3">公司</label>
                                                                <div class="col-xs-9">
                                                                    <input type="text" name="company{$vo.id}" id="company{$vo.id}" data-val="true" maxlength="20" data-val-required="公司不能为空" placeholder="请填写在职公司或最近工作的公司" class="form-control" value="{$vo.company}" />
                                                                    <span data-valmsg-for="company{$vo.id}" data-valmsg-replace="true"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            <div class="form-group">
                                                                <label class="control-label col-xs-3">部门</label>
                                                                <div class="col-xs-9">
                                                                    <input type="text" name="department{$vo.id}" id="department{$vo.id}"
                                                                           data-val-regex="只支持中英文字符和空格" data-val-regex-pattern="[a-zA-Z0-9 \\\\u4e00-\\\\u9fa5]+"
                                                                           data-val="true" maxlength="10" data-val-required="部门不能为空" class="form-control" value="{$vo.department}" />
                                                                    <span data-valmsg-for="department{$vo.id}" data-valmsg-replace="true"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <div class="form-group">
                                                                <label class="control-label col-xs-3">职位</label>
                                                                <div class="col-xs-9">
                                                                    <input type="text" name="position{$vo.id}" id="position{$vo.id}"
                                                                           data-val-regex="只支持中英文字符和空格" data-val-regex-pattern="[a-zA-Z0-9 \\\\u4e00-\\\\u9fa5]+"
                                                                           data-val="true" maxlength="10" data-val-required="职位不能为空" class="form-control" value="{$vo.position}" />
                                                                    <span data-valmsg-for="position{$vo.id}" data-valmsg-replace="true"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-xs-6">
                                                            <div class="form-group">
                                                                <label class="control-label col-xs-3">起始时间</label>
                                                                <div class="col-xs-9">
                                                                    <input type="text" name="beginTime{$vo.id}" data-val="true" data-val-required="起始时间不能为空" id="beginTime{$vo.id}" value="{$vo.btime}" />
                                                                    <span data-valmsg-for="beginTime{$vo.id}" data-valmsg-replace="true"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            <div class="form-group">
                                                                <label class="control-label col-xs-3">结束时间</label>
                                                                <div class="col-xs-9">
                                                                    <input type="hidden" name="sofar{$vo.id}" id="sofar{$vo.id}" value="false" />
                                                                    <input type="text" name="endTime{$vo.id}" data-val="true" data-val-required="结束时间不能为空" id="endTime{$vo.id}" value="{$vo.etime}" />
                                                                    <span data-valmsg-for="endTime{$vo.id}" data-valmsg-replace="true"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div>
                                                        <div class="col-xs-12">
                                                            <div class="form-group">
                                                                <label class="control-label">工作内容</label>
                                                                <div>
                                                                    <textarea name="content" id="content{$vo.id}" class="form-control" data-val="true" data-val-required="工作内容不能为空" rows="5" placeholder="说说你在这家公司的工作内容和职责吧， 200字以内。" maxlength="200">{$vo.content}</textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-buttons text-center">
                                                        <button type="submit" id="btnSaveUserdetails" data-id="{$vo.id}" class="btn btn-success">保存</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </volist>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="footer_scripts">
    <script type="text/x-kendo-template" id="tplAddNew">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading0">
                <h4 class="panel-title">
                    <a href="javascript:void(0)" id="btnRemoveForm0" class="pull-right"><i class="fa fa-times"></i></a>
                    <a role="button" data-toggle="collapse" data-parent="\\#accordion" href="\\#collapse0" aria-expanded="false" aria-controls="collapse0">新增履历</a>
                </h4>
            </div>
            <div id="collapse0" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading0">
                <div class="panel-body form-horizontal label-align-left">
                    <form action="" method="post" id="formAddNewRecord0" data-id="0">
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label class="control-label col-xs-3">公司</label>
                                    <div class="col-xs-9">
                                        <input type="text" name="company0" id="company0" data-val="true" maxlength="20" data-val-required="公司不能为空" placeholder="请填写在职公司或最近工作的公司" class="form-control" />
                                        <span data-valmsg-for="company0" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label class="control-label col-xs-3">部门</label>
                                    <div class="col-xs-9">
                                        <input type="text" name="department0" id="department0"
                                               data-val-regex="只支持中英文字符和空格" data-val-regex-pattern="[a-zA-Z0-9 \\\\u4e00-\\\\u9fa5]+"
                                               data-val="true" maxlength="10" data-val-required="部门不能为空" class="form-control" />
                                        <span data-valmsg-for="department0" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label class="control-label col-xs-3">职位</label>
                                    <div class="col-xs-9">
                                        <input type="text" name="position0" id="position0"
                                               data-val-regex="只支持中英文字符和空格" data-val-regex-pattern="[a-zA-Z0-9 \\\\u4e00-\\\\u9fa5]+"
                                               data-val="true" maxlength="10" data-val-required="职位不能为空" class="form-control" />
                                        <span data-valmsg-for="position0" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label class="control-label col-xs-3">起始时间</label>
                                    <div class="col-xs-9">
                                        <input type="text" name="beginTime0" data-val="true" data-val-required="起始时间不能为空" id="beginTime0" />
                                        <span data-valmsg-for="beginTime0" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label class="control-label col-xs-3">结束时间</label>
                                    <div class="col-xs-9">
                                        <input type="hidden" name="sofar0" id="sofar0" value="false" />
                                        <input type="text" name="endTime0" data-val="true" data-val-required="结束时间不能为空" id="endTime0" />
                                        <span data-valmsg-for="endTime0" data-valmsg-replace="true"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label class="control-label">工作内容</label>&nbsp;<span data-valmsg-for="content0" data-valmsg-replace="true"></span>
                                    <div>
                                        <textarea name="content0" id="content0" class="form-control"
                                                  data-val="true" data-val-required="工作内容不能为空" rows="5"
                                                  placeholder="说说你在这家公司的工作内容和职责吧， 200字以内。" maxlength="200"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-buttons text-center">
                            <button type="submit" id="btnSaveNewRecord" class="btn btn-success">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>
    <script id="tplFooter" type="text/x-kendo-template">
        <a href="javascript:void(0);" class="so-far">至今</a>
    </script>
    <script type="text/javascript">
        require(["jquery",
            "modules/message",
            "kendoui/kendo.web.min",
            "kendoui/kendo.datepicker.min",
            "culture",
            "jquery.unobtrusive"], function ($, messageBox, k, c, validator) {

                $(document).on("click", "a.so-far", function () {
                    var date = $(this).data("date");
                    var container = $(this).closest(".k-calendar-container");
                    var id = container.attr("id");
                    var datepicker = $("span[aria-controls='" + id + "']").closest(".k-datepicker");
                    datepicker.siblings("input:eq(0)").val(true)
                });

                $("#btnChangeSettings").click(function () {
                    $("#phSettingView").hide();
                    $("#phSettingEdit").fadeIn();
                });

                $("#btnCancelSettings").click(function () {
                    $("#phSettingView").fadeIn();
                    $("#phSettingEdit").hide();
                });

                $("#btnSaveSettings").click(function () {
                    var selected = $("#ddlSettings option:selected").val();
                    $.ajax({
                        url: "{:U('User/savejianlipri_ajax')}",
                        data: { 'f_jianli': selected },
                        dataType: "json",
                        type: "post",
                        success: function (data) {
                            var vdata = eval(data);
                            if (vdata.success == 1) {
                                $("#ddlSettings").val(vdata.msg);
                                $('#phSettingView>p').text($("#ddlSettings option:selected").text());
                            }
                            else {
                                messageBox.alert({ content: vdata.msg });
                            }
                            $("#phSettingView").fadeIn();
                            $("#phSettingEdit").hide();
                        }
                    });
                });

                $("#btnSaveUserdetails").click(function () {
                    var dataId = $(this).data("id");
                    saveUserdetails(dataId);
                });

                $(document).ready(function () {

                    kendo.culture("zh-CN");

                    $("#btnAddNew").click(function () {

                        if ($("#formAddNewRecord0").length) {
                            messageBox.alert({ title: '提示', content: "您还有空的履历没完善或者未保存，请先完善或保存" });
                            return;
                        }
                        var tpl = kendo.template($("#tplAddNew").html());
                        var html = kendo.render(tpl, [{ Idx: 0 }]);
                        $("#accordion").prepend(html);
                        $.validator.unobtrusive.parse("#formAddNewRecord0");
                        //$("#txtExpireDate").data('kendoDatePicker').min(new Date());
                        var addBeginDatePicker = $("#beginTime0").kendoDatePicker({
                            change: onStartChange,
                            format: 'yyyy-MM-dd'
                        }).data("kendoDatePicker");
                        addBeginDatePicker.element.attr({ readonly: true });
                        addBeginDatePicker.max(new Date());
                        var addEndDatePicker = $("#endTime0").kendoDatePicker({
                            change: onEndChange,
                            format: 'yyyy-MM-dd',
                            footer: kendo.template($("#tplFooter").html())
                        }).data("kendoDatePicker");
                        addEndDatePicker.element.attr({ readonly: true });
                        addEndDatePicker.max(new Date());

                        $("#btnRemoveForm0").click(function () { $(this).closest(".panel").remove(); });
                        $("#btnSaveNewRecord").click(function () {
                            saveUserdetails(0);
                            return false;
                        });
                    });
                });

                $("#accordion").on("click", ".edit-item", function (data) {
                    var button = $(this);
                    var dataId = button.data("id");

                    if (button.attr("title") == "编辑") {
                        button.attr("title", "取消编辑");
                        $("#phPreview" + dataId).hide();
                        $("#phEditable" + dataId).fadeIn();
                        $("#collapse" + dataId).collapse({ expand: true });

                        var beginDatePicker = $("#beginTime" + dataId).kendoDatePicker({
                            change: onStartChange,
                            format: 'yyyy-MM-dd'
                        }).data("kendoDatePicker");
                        beginDatePicker.element.attr({ readonly: true });
                        var endDatePicker = $("#endTime" + dataId).kendoDatePicker({
                            change: onEndChange,
                            format: 'yyyy-MM-dd',
                            footer: kendo.template($("#tplFooter").html())
                        }).data("kendoDatePicker");
                        endDatePicker.element.attr({ readonly: true });
                    } else {
                        button.attr("title", "编辑");
                        $("#phPreview" + dataId).fadeIn();
                        $("#phEditable" + dataId).hide();
                    }
                });
                $("#accordion").on("click", ".remove-item", function (data) {
                    var button = $(this);
                    var dataId = button.data("id");
                    messageBox.confirm({
                        content: '您确认要删除这条履历信息吗？',
                        sure: function () {
                            $.ajax({
                                url: "{:U('User/deljianli_ajax')}",
                                dataType: "json",
                                type: "post",
                                data: { id: dataId },
                                success: function (data) {
                                    if (data.success) {
                                        button.closest(".panel").fadeOut(1000, function () {
                                            button.closest(".panel").remove();
                                        });
                                    }
                                    messageBox.alert({ content: data.msg });
                                }
                            });
                            messageBox.close();
                        }
                    });
                });

                function onStartChange(e) {
                    var currentForm = $(this.element).closest("form");
                    var id = currentForm.data("id");
                    var end = $("#endTime" + id).data("kendoDatePicker");
                    if (end) {
                        end.min(this.value());
                    }
                }

                function onEndChange(e) {
                    var currentForm = $(this.element).closest("form");
                    var id = currentForm.data("id");
                    var sofar = $("#sofar" + id);
                    var begin = $("#beginTime" + id).data("kendoDatePicker");
                    var end = $("#endTime" + id).data("kendoDatePicker");

                    sofar.val(false);
                    if (begin) {
                        begin.max(this.value());
                    }
                    if (begin.value() > this.value()) {
                        begin.value("");
                    } else {

                    }
                }

                function saveUserdetails(id) {
                    if (!$("#formAddNewRecord" + id).valid()) {
                        return false;
                    }

                    var url = "{:U('User/userdetails_ajax')}";
                    var company = $('#company' + id).val();
                    var department = $('#department' + id).val();
                    var position = $('#position' + id).val();

                    var begin = $("#beginTime" + id).data("kendoDatePicker");
                    var end = $('#endTime' + id).data("kendoDatePicker");
                    var beginTime = kendo.toString(begin.value(), "yyyy-MM-dd");
                    var entTime = kendo.toString(end.value(), "yyyy-MM-dd");
                    var sofar = $("sofar" + id).val();
                    var time = beginTime + ',' + entTime;
                    var content = $('#content' + id).val();

                    $.post(url, {
                        id: id,
                        company: company,
                        department: department,
                        position: position,
                        time: time,
                        sofar: sofar,
                        content: content
                    }, function (data) {
                        var vdata = eval(data);
                        if (vdata.success == 1) {
                            messageBox.alert({ content: '保存成功', sure: function () { window.location.reload(); } });
                        }
                        else {
                            messageBox.alert({ title: '保存失败', content: data.msg });
                        }
                    }, 'json');
                    return false;
                }

            });
    </script>
</block>
